<section id="example-choice-list" class="example-choice-list large" data-property="overscroll-behavior">

    <div class="example-choice">
        <pre><code class="language-css">overscroll-behavior: auto;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>

    <div class="example-choice">
        <pre><code class="language-css">overscroll-behavior: contain;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>

    <div class="example-choice">
        <pre><code class="language-css">overscroll-behavior: none;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>

</section>

<div id="output" class="output large hidden">
    <section id="default-example" class="default-example">
        <div class="example-container">
            <div class="box">
                This is a scrollable container. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.
                <br/><br/>
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
            </div>
            <div id="example-element">
                This is the inner container. Focus on this container, scroll to the bottom and when you reach the bottom keep scrolling.
                <p>If you have <code class="language-css">overscroll-behavior: auto;</code> selected the outer container will start to scroll.</p>
                If you have <code class="language-css">overscroll-behavior: contain;</code> selected, the outer container will not scroll unless you move your cursor out of the inner container and try to perform scroll on the outer container.
            </div>
        </div>
    </section>
</div>
